<template>
  <div class="app-tools-container">
    <div class="atc-user-information">
      <div class="portrait">
        <el-avatar :size="50" :src="$store.state.options.user.portrait" />
      </div>
      <div class="average">{{ $store.state.options.user.nickname }}</div>
    </div>
    <ul class="atc-user-botton el-mt-10">
      <li>
        <el-tooltip class="item" effect="dark" content="退出登陆" placement="right">
          <el-button @click="eventClickLoginOut" icon="el-icon-guide" circle></el-button>
        </el-tooltip>
      </li>
    </ul>
    <!-- <el-tabs
            @tab-click="eventClickTabOperate" @tab-remove="eventRemoveTabOperate"
            v-model="activePath" tab-position="right" closable class="el-mt-20"
        >
            <el-tab-pane v-for="(item, index) in $store.state.tabs.items" :key="index"
                :label="item.title" :name="item.path"
            />
    </el-tabs>-->
  </div>
</template>

<style lang="scss">
.app-tools-container {
  padding: 1rem 1.6rem 0rem 1rem;
  box-sizing: border-box;
}

.atc-user-information {
  .portrait,
  .average {
    text-align: center;
  }
}

.atc-user-botton {
  margin: 0rem;
  padding: 0rem;
  list-style-type: none;

  li {
    margin: 0rem;
    padding: 0rem;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

<script>
import { Avatar, Button, Tooltip, Tabs, TabPane, Message } from "element-ui";

export default {
  components: {
    [Avatar.name]: Avatar,
    [Button.name]: Button,
    [Tooltip.name]: Tooltip,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane
  },
  computed: {
    tabItems() {
      return this.$store.state.tabs.items;
    },
    activePath: {
      get() {
        return this.$store.state.tabs.active;
      },
      set(val) {
        this.$store.commit("tabs/setActivePath", val);
      }
    }
  },
  methods: {
    eventClickTabOperate() {
      if (this.$route.path == this.activePath) return;

      this.$router.push({
        path: this.activePath
      });
    },
    eventRemoveTabOperate(tabName) {
      // 首页不可删除
      if (tabName == "/") return;

      this.$store.commit("tabs/deleteTabs", tabName);

      if (this.activePath === tabName) {
        if (this.tabItems && this.tabItems.length >= 1) {
          let index = this.tabItems.length - 1;

          this.$store.commit("tabs/setActivePath", this.tabItems[index].path);
          this.$router.push({
            path: this.tabItems[index].path
          });
        } else {
          this.$router.push({
            path: "/"
          });
        }
      }
    },
    eventClickLoginOut() {
      var url = "/api/admin/logout",
        params = {
            token:this.$store.state.options.user.token
        };
      this.$util.postRequestInterface(url, params, {
        success: res => {
          console.log(res);
          window.sessionStorage.clear();
          window.location.reload();
        },
        fail: res => {},
        computed: res => {}
      });
    },
    eventClickEditPassword() {
      this.$router.push({
        path: "/index/edit-password"
      });
    }
  }
  // watch: {
  //     $route(to) {
  //         // console.log(to);
  //         var state = true;

  //         for (let item of this.tabItems) {
  //             if (item.path === to.path) {
  //                 state = false;
  //                 this.$store.commit('tabs/setActivePath', to.path);
  //                 break
  //             }
  //         }

  //         if (state) {
  //             this.$store.commit('tabs/addTabs', {
  //                 title: this.$route.meta.menu.name,
  //                 path: to.path
  //             });

  //             this.$store.commit('tabs/setActivePath', to.path);
  //         }
  //     }
  // }
};
</script>
